package showcase

import "github.com/templui/templui/internal/components/inputotp"
import "github.com/templui/templui/internal/components/label"

templ InputOTPWithLabel() {
	<div class="w-full max-w-sm flex flex-col gap-2">
		@label.Label(label.Props{
			For: "otp-with-label",
		}) {
			Verification Code
		}
		@inputotp.InputOTP(inputotp.Props{
			ID:       "otp-with-label",
			HasError: true,
		}) {
			@inputotp.Group() {
				@inputotp.Slot(inputotp.SlotProps{
					Index: 0,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 1,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 2,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 3,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 4,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 5,
				})
			}
		}
	</div>
}
